;(function() {
	
	var instance, 
		discs = [],
		jpcl = jsPlumb.CurrentLibrary,
		_bind = jpcl.bind,

		addDisc = function(evt) {
            alert("He hecho click en ");
			var info = createDisc();
			var e = prepare(info.id);	
			instance.draggable(info.id);
			discs.push(info.id);
			evt.stopPropagation();
			evt.preventDefault();
		},
		
		reset = function(e) {
			for (var i = 0; i < discs.length; i++) {
				var d = document.getElementById(discs[i]);
				if (d) d.parentNode.removeChild(d);
			}
			discs = [];
			e.stopPropagation();
			e.preventDefault();
		},
	
		initHover = function(elId) {
			_bind(elId, "mouseover", function() { jpcl.addClass(elId, "servicio-hover") });
			_bind(elId, "mouseout", function() { jpcl.removeClass(elId, "servicio-hover") });
            //_bind(elId, "mouseover", function() { jpcl.addClass(elId, "bigdot-hover") });
			//_bind(elId, "mouseout", function() { jpcl.removeClass(elId, "bigdot-hover") });
		},
	
		initAnimation = function(elId) {
			var el = document.getElementById(elId),
				_el = jpcl.getElementObject(el);

			_bind(el, 'click', function(e, ui) {
                // alert("click");
/*************
				if (el.className.indexOf("jsPlumb_dragged") > -1) {
					jpcl.removeClass(elId, "jsPlumb_dragged");
					return;
				}
				var o = jpcl.getOffset(_el),
					s = jpcl.getSize(_el),
					pxy = jpcl.getPageXY(e),
					c = [o.left + (s[0]/2) - pxy[0], o.top + (s[1]/2) - pxy[1]],
					oo = [c[0] / s[0], c[1] / s[1]],
					l = oo[0] < 0 ? '+=' : '-=', t = oo[1] < 0 ? "+=" : '-=',
					DIST = 450,
					l = l + Math.abs(oo[0] * DIST);
	
				t = t + Math.abs(oo[1] * DIST);
				// notice the easing here.  you can pass any args into this animate call; they
				// are passed through to jquery as-is by jsPlumb.
				var id = el.getAttribute("id");
				instance.animate(id, {left:l, top:t}, { duration:1400, easing:'easeOutBack' });
**************/
			});
		},
	
	// notice there are no dragOptions specified here, which is different from the
	// draggableConnectors2 demo.  all connections on this page are therefore
	// implicitly in the default scope.
		endpoint = {  
			anchor:[0.5,0.5,-1,0],
            //endpoint:["Dot", {radius:15} ],
			//connectorStyle:{ lineWidth:38,strokeStyle:"rgb(186, 191, 193)" },
            connectorStyle:{
				gradient:{stops:[[0, "#09098e"], [0.5, "#b7b7d6"], [1, "#09098e"]]},	
				lineWidth:48,
				strokeStyle:"#09098e"
			},
             /*         connectorStyle : {
                gradient:{stops:[[0, exampleColor], [0.5, "#09098e"], [1, exampleColor]]},
				lineWidth:5,
				strokeStyle:exampleColor,
				dashstyle:"2 2"
            },*/
            
			endpointsOnTop:true,
			isSource:true,
			maxConnections:10,
			isTarget:true,
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},
        
        endpoint_tronco = {  
			anchor:[0.5,0.5,0,0],
            endpoint:["Dot", {radius:25} ],
			//connectorStyle:{ lineWidth:38,strokeStyle:"rgb(186, 191, 193)" },
            connectorStyle:{
				gradient:{stops:[[0, "#09098e"], [0.5, "#b7b7d6"], [1, "#09098e"]]},	
				lineWidth:40,
				strokeStyle:"#09098e"
			},
             /*         connectorStyle : {
                gradient:{stops:[[0, exampleColor], [0.5, "#09098e"], [1, exampleColor]]},
				lineWidth:5,
				strokeStyle:exampleColor,
				dashstyle:"2 2"
            },*/
			endpointsOnTop:true,
			isSource:true,
			maxConnections:10,
			isTarget:true,
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},
        
		endpoint2 = {          
			anchor:[0.5,0.5,0.1,0.1],
//			connectorStyle:{ lineWidth:3,strokeStyle:"#B1B1B4" },
			connectorStyle:{
				gradient:{stops:[[0, "#bebefd"], [0.5, "#fcfcfc"], [1, "#bebefd"]]},	
				lineWidth:3,
				strokeStyle:"#09098e"
			},
			outlineColor:"#000666",
			outlineWidth:1,
			endpointsOnTop:true,
			isSource:true,
			maxConnections:10,
			isTarget:true,
			overlays:[
				["Label", { location:[1, 1], label:"Drop"} ]
			],
//			connectorOverlays:[ ["Texto 1", { fillStyle:"#09098e", width:15, length:15 } ] ],
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},	
        endpoint3 = {
			anchor:[0.5,0.5,-0.1,-0.1],
//			connectorStyle:{ lineWidth:3,strokeStyle:"#B1B1B4" },
			connectorStyle:{
				gradient:{stops:[[0, "#bebefd"], [0.5, "#fcfcfc"], [1, "#bebefd"]]},	
				lineWidth:3,
				strokeStyle:"#09098e"
			},
			outlineColor:"#000666",
			outlineWidth:1,
			endpointsOnTop:true,
			isSource:true,
			maxConnections:10,
			isTarget:true,
			overlays:[
				["Label", { location:[1, 1], label:"Drop"} ]
			],
//			connectorOverlays:[ ["Texto 1", { fillStyle:"#09098e", width:15, length:15 } ] ],
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},
         endpoint4 = {
			anchor:[0.5,0.5,-0.15,-0.05],
//			connectorStyle:{ lineWidth:3,strokeStyle:"#B1B1B4" },
			connectorStyle:{
				gradient:{stops:[[0, "#09098e"], [0.5, "#b7b7d6"], [1, "#09098e"]]},	
				lineWidth:5,
				strokeStyle:"#09098e"
			},
			outlineColor:"#000666",
			outlineWidth:1,
			endpointsOnTop:true,
			isSource:true,
			maxConnections:10,
			isTarget:true,
			overlays:[
				["Label", { location:[1, 1], label:"Drop"} ]
			],
//			connectorOverlays:[ ["Texto 1", { fillStyle:"#09098e", width:15, length:15 } ] ],
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},       
		endpointSRV1 = {
			anchor:[0.4,0.4,0,0],
            //endpoint:["Dot", {radius:15} ],
			connectorStyle:{ lineWidth:18,strokeStyle:"rgb(101, 101, 199)" },
            connector : "Straight",
			endpointsOnTop:true,
 //         paintStyle:{lineWidth:17,strokeStyle:"rgb(150, 150, 252)",outlineColor:"#666",outlineWidth:1},
            isSource:true,
			maxConnections:10,
			isTarget:true,
			dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
		},
        
		prepare = function(elId) {
			initHover(elId);
			initAnimation(elId);
                    return instance.addEndpoint(elId, endpoint3);
   		},
		
        prepare_dcha = function(elId) {
			initHover(elId);
			initAnimation(elId);
                    return instance.addEndpoint(elId, endpoint2);
   		},
		// this is overridden by the YUI demo.
		createDisc = function() {
			var d = document.createElement("div");
			d.className = "servicio";
			document.getElementById("animation-demo").appendChild(d);
			var id = '' + ((new Date().getTime())), _d = jpcl.getElementObject(d);
			d.setAttribute("id", id);
			var w = screen.width - 162, h = screen.height - 162;
			var x = (0.2 * w) + Math.floor(Math.random()*(0.5 * w));
			var y = (0.2 * h) + Math.floor(Math.random()*(0.6 * h));
			d.style.top= y + 'px';
			d.style.left= x + 'px';
			return {d:d, id:id};
		};
		
	jsPlumb.ready(function() {

		// get a jsPlumb instance, setting some appropriate defaults and a Container.
		instance = jsPlumb.getInstance({
			DragOptions : { cursor: 'wait', zIndex:20 },
			Endpoint : [ "Image", { url:"littledot.png" } ],
			Connector : [ "Bezier", { curviness: 150 } ],
			Container:"animation-demo"
		});				
			
        instance_tronco = jsPlumb.getInstance({
			DragOptions : { cursor: 'wait', zIndex:20 },
			Endpoint : [ "Image", { url:"littledot.png" } ],
			Connector : [ "Bezier", { curviness: -150 } ],
			Container:"animation-demo"
		});
        
        //*****************************************************
        instance2 = jsPlumb.getInstance({
			DragOptions : { cursor: 'wait', zIndex:20 },
			endpoint:["Dot", { radius:30 }],
            paintStyle:{ fillStyle:'#4a3f86' },
			connector:[ "Flowchart", { cornerRadius:10 } ],
			Container:"animation-demo"
		});	
        //******************************************************
		// suspend drawing and initialise.
		instance.doWhileSuspended(function() {
			var e1 = prepare("srv1"),
				e2 = prepare("srv2"),
				e3 = prepare("srv3"),
                e4 = prepare("srv4"),
                e5 = prepare("srv5"),
                e6 = prepare("srv6"), 
                e7 = prepare("srv7"),
                e8 = prepare("srv8"),
                e9 = prepare("srv9"),
                e10 = prepare("srv10"),
                e11 = prepare("srv11"),
                e12 = prepare("srv12"),
                e13 = prepare("srv13"),
                e14 = prepare("srv14"),
                e15 = prepare("srv15"),
                e16 = prepare("srv16"),
                e1Dcha = prepare_dcha("srv1"),
                e2Dcha = prepare_dcha("srv2"),
                e3Dcha = prepare_dcha("srv3"),
                e5Dcha = prepare_dcha("srv5"),
                e7Dcha = prepare_dcha("srv7"),
                e13Dcha = prepare_dcha("srv13"),
                e14Dcha = prepare_dcha("srv14"),
//                raiz = prepare("raiz"),
                raiz1 = prepare("raiz1"),
                raiz2 = prepare("raiz2"),
                raiz3 = prepare("raiz3"),
                tronco = prepare("tronco"),
//                tronco1 = prepare("tronco1"),
//                tronco2 = prepare("tronco2"),
				clearBtn = jsPlumb.getSelector("#anim-clear"),
				addBtn = jsPlumb.getSelector("#add");

			_bind(clearBtn, "click", function(e) {
				e.preventDefault();
				e.stopPropagation();
				instance.detachEveryConnection(); 
			});

//			instance.connect({ source:e1, target:e2 });
//			instance.connect({ source:raiz, target:tronco });
//            instance.connect({ source:raiz1, target:tronco });
//            instance.connect({ source:raiz2, target:tronco });
//            instance.connect({ source:raiz3, target:tronco });
//            instance_tronco.connect({ source:tronco1, target:tronco2 });
            instance.connect({ source:e1Dcha, target:e2Dcha });
			instance.connect({ source:e1Dcha, target:e3Dcha });
            instance.connect({ source:e4, target:e2});
			instance.connect({ source:e5, target:e6 });
            instance.connect({ source:e6, target:e1 });
			instance.connect({ source:e5Dcha, target:e7Dcha });
            instance.connect({ source:e6, target:e8 });
            instance.connect({ source:e8, target:e9 });
            instance.connect({ source:e10, target:e2 });
            instance.connect({ source:e2, target:e8 });
            instance.connect({ source:e11, target:e1 });
            instance.connect({ source:e6, target:e12 });
            instance.connect({ source:e8, target:e4 });
            instance.connect({ source:e12, target:e8 });
            instance.connect({ source:e12, target:e13 });
            instance.connect({ source:e8, target:e16 });
            instance.connect({ source:e12, target:e15 });
            instance.connect({ source:e13Dcha, target:e7Dcha });
            instance.connect({ source:e12, target:e9 });
            instance.connect({ source:e1Dcha, target:e5Dcha });
            instance.connect({ source:e13Dcha, target:e5Dcha });
            instance.connect({ source:e13Dcha, target:e14Dcha });

			_bind(addBtn, 'click', addDisc );							
		});
        
        // ********************* En Pruebas ********************************
        var connectorStrokeColor = "rgb(150, 150, 252)",
            connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
            hoverPaintStyle = { strokeStyle:"#7ec3d9" };
  
/*
        var connection2 = instance2.connect({
            source:'srv1', target:'srv2',
            paintStyle:{
                lineWidth:10,
                strokeStyle:connectorStrokeColor,
                outlineColor:"#666",
                outlineWidth:1
            },
            hoverPaintStyle:hoverPaintStyle,
  //          anchor:"AutoDefault",
            anchor:[0.5,0.5,0,0],
            detachable:false,
            endpointStyle:{
                gradient : {
                    stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
                    offset:17.5,
                    innerRadius:15
                },
                radius:5
            }
		   });
*/
        
        // ******************************************************************
	});
	
})();